// 1、获取数据
async function renderStudent() {
    let { data: res } = await axios.get('/students')
    // console.log(res);
    // 遍历数组，渲染页面
    let arr = res.data.map(item => {
        return `<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id=${item.id} class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id=${item.id} class="bi bi-trash"></i></a>
        </td>
      </tr> `
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()


// 2、添加操作，模态框用法，省市县联动
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏

// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    // 模态框标题修改
    document.querySelector('#form').reset()
    document.querySelector('#modal .modal-title').innerHTML = '添加学员'
    addModal.show()
})

// 完成省市县联动
async function province() {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')
    // 立马获取省
    let { data: res } = await axios.get('/api/province')
    // console.log(res);
    let arr = res.data.map(item => {
        return `<option value="${item}">${item}</option>`
    })
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')


    // 获取市
    province.addEventListener('change', async function () {

        // 无论获取哪个省，都要重置地区
        area.innerHTML = '<option value="">--地区--</option>'

        // 如果是空的话，市也是空的
        if (province.value === '') {
            return '<option value="">--城市--</option>'
        }
        let { data: res } = await axios.get('/api/city', { params: { pname: province.value } })
        // console.log(res);
        let arr = res.data.map(item => {
            return `<option value="${item}">${item}</option>`
        })
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
    })

    // 获取地区
    city.addEventListener('change', async function () {
        let { data: res } = await axios.get('/api/area', { params: { pname: province.value, cname: city.value } })
        console.log(res);
        let arr = res.data.map(item => {
            return `<option value="${item}">${item}</option>`
        })
        area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
    })
}
province();

// 3、点击按钮，添加学生信息
document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault()
    // 获取表单内容
    let data = val(document.querySelector('#form'))

    // 接口要求转换为数字型
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
    console.log(data);

    // 判断是修改学员还是添加
    let title = document.querySelector('#modal .modal-title').innerHTML

    if (title === '添加学员') {
        // 发送请求
        try {
            let { data: res } = await axios.post('/students', data)
            // 提示成功
            message.success(res.message)
            // 关闭弹窗
            addModal.hide()
            // 重新获取数据，渲染页面
            renderStudent()
        } catch (e) {
            message.error('添加失败')
        }
    } else if (title === '修改学员') {
        //    需要请求体 /students/:id，所以要获取id
        try {
            let { data: res } = await axios.put(`/students/${document.querySelector('#modal h5').dataset.id}`, data)
            // 提示成功
            message.success(res.message)
            // 关闭弹窗
            addModal.hide()
            // 重新获取数据，渲染页面
            renderStudent()
        } catch (e) {
            message.error('修改失败')
        }
    }


})



// 4、删除操作
document.querySelector('.list').addEventListener('click', async function (e) {

    // 判断点击的是哪个按钮
    // 修改按钮
    try {
        if (e.target.classList.contains('bi-pen')) {
            let id = e.target.dataset.id
            addModal.show()

            let { data: res } = await axios.get(`/students/${id}`)

            // 回填县市，先获取所有的县市内容，渲染
            let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
            let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
            const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2])
            // console.log(result);
            console.log(a);


            // 获取到数据，渲染页面
            let arr1 = c.map(item => {
                return ` <option option value = "${item}" > ${item}</option > `
            })
            document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr1.join('')

            let arr2 = a.map(item => {
                return ` <option option value = "${item}" > ${item}</option > `
            })
            document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr2.join('')

            // 进行数据回填，发送请求拿到数据
            val(document.querySelector('#form'), res.data)


            // 修改模态框的标题
            document.querySelector('h5.modal-title').innerHTML = `修改学员`
            // 设置自定义属性，获取id
            document.querySelector('#modal h5').setAttribute('data-id', id)

        }
    } catch (e) {
        message.error('修改失败')
    }


    // 删除按钮，删除数据内容，重新渲染页面
    try {
        if (e.target.classList.contains('bi-trash')) {
            let id = e.target.dataset.id
            const { data: res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent()
        }
    } catch (e) {
        message.error('删除失败')
    }

})